<template>
  <div class="index-con">
    <div class="hidden-xs-only">
      <el-carousel :interval="3000" height="450px">
        <el-carousel-item v-for="(item, index) in banner" :key="index">
          <div v-bind:style="{height:'450px',background: 'url(' + item.piclink + ') center center / cover no-repeat'}"></div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="banner hidden-sm-and-up">
      <swipe loop style="width: 100%" :autoplayTime="3000" height="200px">
        <swipe-item v-for="(n, index) in banner" :key="index">
          <div v-bind:style="{height:'200px',background: 'url(' + n.piclink + ') center center / cover no-repeat'}"></div>
        </swipe-item>
      </swipe>
    </div>
    <div class="container solution hidden-xs-only" style="marginTop:25px">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="24">
          <el-card
            class="box-card padd"
            shadow="always"
            :body-style="{ padding: '0px' }"
            @click.native="toPoint"
          >
            <el-col :span="5">
              <img :src="zs" class="donszCl"/>
            </el-col>
            <el-col :span="19" style="padding: 0 12px;cursor:pointer;">
              <p style="marginTop:20px;fontSize:18px" v-html="noticeContent"></p>
            </el-col>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="container solution hidden-xs-only" style="marginTop:25px">
      <el-row type="flex" class="row-bg" justify="space-around">
        <el-col :span="12" style="padding-right: 10px;" class="tabPage">
          <el-tabs type="border-card" style="height: 360px;" value="众尊资讯" @tab-click="handleGetList">
            <el-tab-pane label="众尊资讯" name="众尊资讯" v-loading="loading">
              <span slot="label">众尊资讯&nbsp;<i class="el-icon-s-operation"></i></span>
              <el-row>
                <el-col :span="24" v-for="(item, index) in allData.rows" :key="index">
                  <el-col :span="23">
                    <div class="all newsDiv" @click="toDetail(item)">
                      <el-col :span="6">
                        <img :src="item.noticeCover" class="newsImg" v-if="item.noticeCover"/>
                      </el-col>
                      <el-col :span="17" :offset="1">
                        <div class="newsChildDiv">
                          <p class="mainFont">
                            {{ item.noticeTitle }}
                            <!-- 上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今 -->
                          </p>
                          <p class="timeCls">{{ item.createTime }}</p>
                        </div>
                      </el-col>
                    </div>
                  </el-col>
                </el-col>
              </el-row>
              <div class="newsMore">
                <img @click="zzzxClick" src="../../../../static/image/j.png"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="行业动态" name="行业动态" v-loading="loading">
              <span slot="label">行业动态&nbsp;<i class="el-icon-refresh"></i></span>
              <el-row>
                <el-col :span="24" v-for="(item, index) in allData.rows" :key="index">
                    <el-col :span="23">
                      <div class="all newsDiv" @click="toDetail(item)">
                        <el-col :span="6">
                          <img :src="item.noticeCover" class="newsImg" v-if="item.noticeCover"/>
                        </el-col>
                        <el-col :span="17" :offset="1">
                          <div class="newsChildDiv">
                            <p class="mainFont">
                              {{ item.noticeTitle }}
                            </p>
                            <p class="timeCls">{{ item.createTime }}</p>
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                </el-col>
              </el-row>
              <div class="newsMore">
                <img @click="hhdtClick" src="../../../../static/image/j.png"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="法规速递" name="法规速递" v-loading="loading">
              <span slot="label">法规速递&nbsp;<i class="el-icon-position"></i></span>
              <el-row>
                <el-col :span="24" v-for="(item, index) in allData.rows" :key="index">
                    <el-col :span="23">
                      <div class="all newsDiv" @click="toDetail(item)">
                        <el-col :span="6">
                          <img :src="item.noticeCover" class="newsImg" v-if="item.noticeCover"/>
                        </el-col>
                        <el-col :span="17" :offset="1">
                          <div class="newsChildDiv">
                            <p class="mainFont">
                              {{ item.noticeTitle }}
                              <!-- 上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今 -->
                            </p>
                            <p class="timeCls">{{ item.createTime }}</p>
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                </el-col>
              </el-row>
              <div class="newsMore">
                <img @click="fgsdClick" src="../../../../static/image/j.png"/>
              </div>
            </el-tab-pane>
            <el-tab-pane label="众尊研究" name="众尊研究" v-loading="loading">
              <span slot="label">众尊研究&nbsp;<i class="el-icon-folder"></i></span>
              <el-row>
                <el-col :span="24" v-for="(item, index) in allData.rows" :key="index">
                    <el-col :span="23">
                      <div class="all newsDiv" @click="toDetail(item)">
                        <el-col :span="6">
                          <img :src="item.noticeCover" class="newsImg" v-if="item.noticeCover"/>
                        </el-col>
                        <el-col :span="17" :offset="1">
                          <div class="newsChildDiv">
                            <p class="mainFont">
                              {{ item.noticeTitle }}
                              <!-- 上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今上海众尊清算服务有限公司自2005年5月创始至今 -->
                            </p>
                            <p class="timeCls">{{ item.createTime }}</p>
                          </div>
                        </el-col>
                      </div>
                    </el-col>
                </el-col>
              </el-row>
              <div class="newsMore">
                <img @click="zzysClick" src="../../../../static/image/j.png"/>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-col>
        <el-col :span="12" style="padding-left: 10px; padding-right: 10px;cursor:pointer;">
          <video :src="videoSrc" width="100%" height="330px" controls></video>
        </el-col>
      </el-row>
    </div>
    <div class="container solution hidden-sm-and-up" style="marginTop:25px">
      <el-row class="row-bg bbb">
        <el-col :span="24" style="textAlign:center">
          <el-card
            class="box-card padd "
            shadow="always"
            :body-style="{ padding: '0px'}"
          >
            <el-col :span="24">
              <img :src="zs" class="donszCl"/>
            </el-col>
            <el-col :span="24" style="padding: 0 12px;marginTop:10px">
              <p>
                上海众尊清算服务有限公司自2005年5月创始至今，在市、区委办局、人民法院等有关领导、市破产管理人协会、市企业清算行业协会、以及社会各界朋友的关心支持下，获得了长足的进步和健康的发展。回顾企业发展历程，上海众尊清算一贯秉承“依法、尽责、专业、高效”的企业精神，胸怀
                “经营管理新发展、员工素质新提升、企业效益新增长”
                的企业“三新”发展目标，恪守
                “勤勉尽责，忠实执行职务”的职业操守，始终致力于为广大客户提供一体化全站式的企业清算服务。不忘初心，砥砺前行，开拓创新，追求卓越，为每一个客户提供专业高效、贴心满意的服务，是我们不变的追求！
                “雄关漫道真如铁，而今迈步从头越”。近年来，随着党和国家以及各级政府完善市场主体退出机制，改善市场化、法制化、国际化营商环境等相关方针政策密集出台落地，企业清算行业又迎来了新的重大发展机遇和挑战。众尊清算会以更加自信、自立自律、自强的企业担当拥抱这一机遇和挑战。众尊清算真诚地欢迎各种形式的合作，坚信“合作共赢”是永恒的时代发展主题。
                众尊清算立足上海，辐射全国。我们将以更加合法依规、严谨规范的运作，专业配套齐全的优秀团队，广泛而深入的社会渠道，客户至上、优质高效的热情服务，做好每一个受托合作项目，让每一位客户放心满意。依法保护国有资产，依法保护债权人、债务人、投资者和资产所有者的合法权益，是我们坚定的企业责任；您的目标愿望的实现就是我们最大的成就。我们高兴地与您携手并肩，努力为社会、客户、员工、股东创造新的更大价值。
                感恩有您，一路同行！
              </p>
            </el-col>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <!-- <h2 class="title text-center">公司简介</h2> -->
    <div class="container solution">
      <!--<h2 class="title text-center">产品解决方案</h2>-->
      <!-- <h3 class="text-center">将我们的数据及开发能力，赋能到公司更多产品及业务线，提供整套数据解决方案</h3> -->
      <el-row
        class="row-bg"
        style="margin-top: 15px"
        :gutter="20"
      >
        <el-col :span="12" class="sports solution-box titlebox" v-for="(item,index) in allTitle" :key="index">
          <el-card
            class="box-card"
            shadow="always"
            :body-style="{ padding: '0px' }"
            style="background: #1965ab"
          >
            <dl @click="goPage(item)">
              <dt :class="'dt'+index">{{item.name}}</dt>
              <!-- <dd>
                为游戏开发者提供数据、账号、支付等一站式解决方案，使游戏开发者专注于游戏开发
              </dd> -->
            </dl>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="container2  hidden-sm-and-up">
      <video :src="videoSrc" width="400" height="280" controls></video>
    </div>
    <div class="container product">
      <h2 class="title text-center hidden-xs-only" style="marginTop:25px">诚信、客观、勤勉、兢业</h2>
      <h2 class="title text-center hidden-sm-and-up" style="marginTop:25px">诚信、客观<br/>勤勉、兢业</h2>
      <el-row :gutter="20">
        <el-col
          :span="6"
          v-for="(item, index) in cultureList"
          class="product-box"
          :key="index"
        >
          <el-card :body-style="{ padding: '0px' }" shadow="hover" style="background: #1965ab">
            <div :class="'pp'+index" style="textAlign:center;height:90px">
              <h3 style="color:#fff">{{ item.title }}</h3>
              <p style="color:#fff">{{ item.content }}</p>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "homepage",
    data() {
      return {
        cultureList: [
          {
            title: "企业精神",
            content: "依法、尽责、专业、高效"
          },
          {
            title: "企业理念",
            content: "不求最大 但求最佳"
          },
          {
            title: "经营哲学",
            content: "以市场为生存之源管理为发展之本"
          },
          {
            title: "企业目标",
            content: "经营管理新发展"
          },
        ],
        allTitle: [
          {
            name: "众尊简介",
            path: "zunIntroduce"
          },
          {
            name: "资质荣誉",
            path: "gloly"
          },
          {
            name: "组织机构",
            path: "construction"
          },
          // {
          //   name: "专业团队",
          //   path:"proTeam"
          // },
          {
            name: "企业文化",
            path: "clutrue"
          },
          // {
          //   name: "联系我们",
          //   path:"contactUs"
          // },
        ],
        noticeContent: "【公司新闻】祝贺众尊清算公司成为上海市重合同守信用AAA级企业！日前，从上海市合同信用促进会传来好消息，上海众尊清算服务有限公司喜获上海市重合同守信用AAA级证书。上海众尊清算服务有限公司是上海市企业清算协会专业委员会单位、上海市破产管理人协会机构会员、上海联合产权交易所的经纪会员，还是阿里在线破产资产拍卖平台指定线下专业服务商。",
        zs: require("../../../../static/image/zs.png"),
        noticeRemark: "https://mp.weixin.qq.com/s/vOWl0dFKUrGU18OByAf8Sg",
        // videoSrc:require("../../../../static/images/zzvideo.mp4"),
        videoSrc: "",
        dongshiz: require("../../../../static/image/dongshizhang.png"),
        value2: 0,
        banner: [
          // {
          //   web: "CMBI",
          //   img: require("../../../../static/image/banner01.jpg"),
          //   m_img: require("../../../../static/image/banner1.jpg"),
          // },
          // {
          //   web: "CPBI",
          //   img: require("../../../../static/image/banner02.jpg"),
          //   m_img: require("../../../../static/image/banner2.jpg"),
          // },
          // {
          //   web: "DATAX",
          //   img: require("../../../../static/image/banner03.jpg"),
          //   m_img: require("../../../../static/image/banner3.jpg"),
          // },
        ],
        product: [
          {
            img: "static/image/index01.png",
            tit: "支付系统",
            con: "高度集成多家主流支付渠道，一键接入，简单快捷",
            btn: "查看详情",
            href: "payment",
          },
          {
            img: "static/image/index02.png",
            tit: "数据系统",
            con: "可视化自定义数据平台，数据运营尽在掌握",
            btn: "查看详情",
            href: "dataSystem",
          },
          {
            img: "static/image/index03.png",
            tit: "大数据SDK",
            con: "收集全面的用户数据，深度把握用户行为，为分析用户提供有效数据",
            btn: "查看详情",
            href: "dataSDK",
          },
          {
            img: "static/image/index04.png",
            tit: "帐号系统",
            con: "敬请期待……",
            btn: "查看详情",
            href: "accountNum",
          },
        ],
        loading: false,
        allData: [],
      };
    },
    mounted() {
      this.getList(3);
      this.getHdpList();
      this.getVideo();
      this.getSyxw();
    },
    methods: {
      zzysClick() {
        this.$router.push({
          path: "zzStudy",
        });
      },
      fgsdClick() {
        this.$router.push({
          path: "conturyLaw",
        });
      },
      hhdtClick() {
        this.$router.push({
          path: "hangyeMove",
        });
      },
      zzzxClick() {
        this.$router.push({
          path: "zixun",
        });
      },
      getList(type) {
        this.loading = true;
        this.$axios
          .post(
            "/baseInfo/consult/getConsultlist",
            this.$qs.stringify({
              noticeType: type,
              pageNum: 1,
              pageSize: 2,
            })
          )
          .then((response) => {
            this.loading = false;
            console.log(response.data);
            this.allData = response.data;
          })
          .catch((error) => {
            console.log(error);
          });
      },
      handleGetList(tab, event) {
        console.log(tab)
        if (tab.name == "众尊资讯") {
          this.getList(3)
        } else if (tab.name = "行业动态") {
          this.getList(4)
        } else if (tab.name = "法规速递") {
          this.getList(5)
        } else if (tab.name = "众尊研究") {
          this.getList(6)
        }
      },
      toDetail(item) {
        console.log(item);
        this.$router.push({
          path: "zixundetail",
          query: {
            noticeId: item.noticeId,
          },
        });
      },
      toPoint() {
        console.log(44)
        window.open(this.noticeRemark);
      },
      getHdpList() {
        this.$axios
          .get("/baseInfo/consult/getHdpList", {
            params: {},
          })
          .then((response) => {
            console.log(response.data);
            if (response.data.code == 0) {
              this.banner = response.data.data;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      getVideo() {
        this.$axios
          .get("/baseInfo/consult/getSp", {
            params: {},
          })
          .then((response) => {
            console.log(response.data);
            if (response.data.code == 0) {
              this.videoSrc = response.data.data.piclink;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      getSyxw() {
        this.$axios
          .get("/baseInfo/consult/getSyxw", {
            params: {},
          })
          .then((response) => {
            console.log(response.data);
            if (response.data.code == 0) {
              this.zs = response.data.data.noticeCover;
              this.noticeContent = response.data.data.noticeContent;
              this.noticeRemark = response.data.data.remark;
            }
          })
          .catch((error) => {
            console.log(error);
          });
      },
      goPage(item) {
        this.$router.push({
          path: item.path
        });
      },
      goProductPage(id) {
        if (id !== "accountNum") {
          this.$router.push({
            path: "/product",
            query: {
              id: id,
            },
          });
        }
      },
      goSolutionPage(page) {
        this.$router.push({
          path: "/solution",
          query: {
            page: page,
          },
        });
      },
      listen(web) {
        _hmt.push(["_trackEvent", "banner-login", "click", web]);
      },
    },
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .newsMore {
    width: 100%;
    text-align: center;
    margin-top: 25px;
  }

  .container1 {
    width: 1250px;
    margin: 0 auto;
    margin-top: 78px;
    margin-bottom: 10px;
  }

  .container2 {
    width: 400px;
    margin: 0 auto;
    margin-top: 40px;
    margin-bottom: 20px;
  }

  .titlebox {
    margin-top: 10px;
  }

  .padd {
    padding: 20px 20px 20px 20px;

  }

  .donszCl {
    width: 220px;
    // height: 200px;
  }

  .index-con {
    .pp0 {
      background: url('../../../../static/images/16.png') no-repeat center center;
    }

    .pp1 {
      background: url('../../../../static/images/17.png') no-repeat center center;
    }

    .pp2 {
      background: url('../../../../static/images/18.png') no-repeat center center;
    }

    .pp3 {
      background: url('../../../../static/images/19.png') no-repeat center center;
    }

    .banner {
      max-width: 1370px;
      margin: 0 auto;
    }

    .el-carousel--horizontal {
      overflow-x: visible;
    }

    .el-carousel__indicators--outside {
      margin-top: 20px;

      .el-carousel__button {
        height: 4px;
      }
    }

    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }

    .el-carousel__item img {
      width: 100%;
      background: #ffffff;
    }

    .el-carousel__arrow {
      height: 50px;
      width: 50px;
    }

    .solution {
      padding: 10px 0;

      dl {
        // padding: 43px 33px 60px 76px;
        height: 140px;
        line-height: 140px;
        text-align: center;
      }

      .dt0 {
        background: url('../../../../static/images/12.png') no-repeat center center;
      }

      .dt1 {
        background: url('../../../../static/images/13.png') no-repeat center center;
      }

      .dt2 {
        background: url('../../../../static/images/14.png') no-repeat center center;
      }

      .dt3 {
        background: url('../../../../static/images/15.png') no-repeat center center;
      }

      dt {
        color: #fff;
        font-size: 22px;
        margin-bottom: 28px;

      }

      dd {
        color: #959595;
        font-size: 18px;
        line-height: 30px;
      }

      > h3 {
        color: #888;
      }
    }

    .title {
      font-size: 40px;
    }

    .product {
      padding-top: 4px;
    }

    .product-box {
      margin-top: 28px;
      position: relative;
      bottom: 0;
      transition: all 0.3s ease-in-out;
    }

    .card1 {
      height: 90px;
      width: 100%;
    }

    .card {
      height: 150px;
      width: 100%;
      position: relative;

      h3 {
        font-size: 18px;
      }

      img {
        height: 100px;
        width: 100px;
        margin: 54px 0 30px 0;
      }

      p {
        margin-top: 15px;
        font-size: 14px;
        color: #99a9bf;
        padding: 0 25px;
        line-height: 20px;
      }

      a {
        height: 52px;
        line-height: 52px;
        font-size: 14px;
        color: #409eff;
        text-align: center;
        border: 0;
        border-top: 1px solid #eaeefb;
        padding: 0;
        position: absolute;
        bottom: 0;
        left: 0;
        cursor: pointer;
        width: 100%;
        background-color: #fff;
        border-radius: 0 0 5px 5px;
        transition: all 0.3s;
        text-decoration: none;
        display: block;
      }
    }

    .product-box:hover {
      bottom: 6px;
      box-shadow: 0 6px 18px 0 rgba(232, 237, 250, 0.5);
    }

    .tabPage {
      .is-active {
        font-size: 20px;
      }
    }

    .card a:hover {
      color: #fff;
      background: #409eff;
    }

    .card .bg-gray:hover {
      background: #ffffff;
      color: #409eff;
    }

    @media (max-width: 768px) {
      .banner {
        /*display: none;*/
      }

      .solution {
        padding: 10px 0 10px 0;

        h3 {
          text-align: left;
          padding: 0 20px;
          font-size: 20px;
        }
      }

      .product-box {
        width: 80%;
        float: none;
        margin: 0 auto 20px;
      }

      .el-row--flex {
        display: block;
      }

      .solution-box {
        width: 80%;
        float: none;
        margin: 0 auto 20px;

        dl {
          padding: 30px;
        }
      }
    }
  }

  .moreCl {
    margin-left: 480px;
    cursor: pointer;
    width: 80px;
    height: 25px;
    line-height: 25px;
    border: none;
    margin-top: 5px;
  }
</style>
